<template>
  <view class="proxy-login box pd-v-72 flex flex-ver flex-j-center flex-center position-r">
    <u-navbar
        :autoBack="true"
        bgColor="rgba(0,0,0,0)"
        :titleStyle="{color:'#fff'}"
    >
    </u-navbar>

    <image class="" src="@/static/logo.png" style="width:152rpx" mode="widthFix" />

    <view class="mr-t-24 font44 lh-60 bold color-default">
        鸽充充
    </view>

    <view class="mr-t-14 font30 lh-42 color-info">
        行驶保驾护航，充电轻松安心
    </view>
    

    <view class="full-w box mr-t-100">
        
        <view>
            <u--form
                :model="form"
                :rules="rules"
                ref="uForm"
            >
                <u-form-item
                    prop="username"
                >
                    <u--input
                        v-model="form.username"
                        border="none"
                        shape="circle"
                        :customStyle="{backgroundColor:'#F5F5F5',height:'108rpx',padding:'0 40rpx'}"
                        placeholder="请输入登录账号"
                    ></u--input>
                </u-form-item>
                <u-form-item
                    class="mr-t-32"
                    prop="password"
                >
                    <u--input
                        v-model="form.password"
                        border="none"
                        shape="circle"
                        :customStyle="{backgroundColor:'#F5F5F5',height:'108rpx',padding:'0 40rpx'}"
                        type="password"
                        placeholder="请输入登录密码"
                    ></u--input>
                </u-form-item>
            </u--form>
        </view>
          
      
        <view class="full-w box mr-t-60 pd-v-40">
            <u-button type="primary" :customStyle="{height:'88rpx'}" shape="circle" color="#35BE65" @click="login"  text="登录"></u-button>
        </view>
    </view>

    <view class="mr-t-36 flex flex-center" @click="checkChange">
        <view class="mr-r-12 pd-h-10" >
             <radio :checked="isCheck" style="transform:scale(0.8);"></radio>
            <!-- <u-icon  :name="isCheck ? 'checkmark-circle-fill' : 'checkmark-circle'" :color="isCheck ? '#3AC981' : '#666'" size="20" ></u-icon> -->
        </view>
          
        <view class="font24 lh-34 color-default">
            记住账号密码
        </view>
          
    </view>

    <view class="proxy-login__footer txt-center pd-v-72 font28 lh-40 color-note position-a">
        代理端说明：仅支持本公司代理人员登录，方便代理人员查询充电桩数据
    </view>
      
      
      
   
      
      
  </view>
</template>

<script setup>

import { useStore } from '@/store/index.js';
import { agentLogin } from "@/api/proxy";


import { computed, ref, onMounted, reactive } from "vue";
import { onReady, onLoad } from '@dcloudio/uni-app';

const store = useStore();

const isCheck = ref(false)
const form = ref({
    username: '',
    password: '',
});
const uForm = ref(null);
const rules = ref({
    username: [
        {
            required: true,
            message: '请输入登录账号',
            trigger: 'blur',
        }
    ],
    password: [
        {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur'
        }
    ]
})

onReady(() => {
    console.log(uForm.value)
    uForm.value.setRules(rules.value)
});

onLoad(() => {
    if(uni.getStorageSync('rememberProxy')) {
        form.value = uni.getStorageSync('rememberProxy')
        isCheck.value = true
    }
});

const checkChange = () => {
    isCheck.value = !isCheck.value
}

const login = () => {
    uForm.value.validate().then(res => {
        if(res) {
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    uni.showLoading({
                        title: '登录中...',
                        mask: true
                    });
                    
                    agentLogin({
                        username: form.value.username,
                        password: form.value.password,
                        code: loginRes.code
                    }).then(res => {
                        uni.hideLoading()
                        console.log(res)
                        if(res.code == 200) {
                            // if(res.data.roleType != 1) {
                            //     uni.showToast({
                            //         title: '账号没有权限登录代理端',
                            //         icon: 'none',
                            //         duration: 2000
                            //     });
                            //     return;
                            // }
                            if(isCheck.value) {
                                uni.setStorageSync('rememberProxy', {
                                    username: form.value.username,
                                    password: form.value.password
                                })
                            } else {
                                uni.removeStorageSync('rememberProxy')
                            }
                            store.user.SET_USERINFO1(res.data)
                            store.user.SET_TOKEN1(res.data.token)
                            uni.setStorageSync('token1', res.data.token)
                            uni.setStorageSync('userInfo1', res.data)
                            uni.showToast({
                                title: '登录成功',
                                icon: 'success',
                                duration: 2000,
                                success: () => {
                                    uni.reLaunch({
                                        url: '/sub_proxy/pages/index/index'
                                    })
                                }
                            });
                            
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    }).catch(err => {
                        uni.hideLoading()
                        uni.showToast({
                            title: '登录失败',
                            icon: 'none',
                            duration: 2000
                        });
                    })
                }
            })
            
        }
    }).catch(err => {
        console.log(err)
    })
}

</script>

<style lang="scss" scoped>
.proxy-login {
    height:100vh;
    

    .proxy-login__footer  {
        left:0;
        bottom:68rpx;
    }
}
</style>
